import React from 'react';
import Baselist from 'components/Baselist';
import {Row, Form, Input,Button,Select,Col} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

import API, {GET_CSRF_TOKEN,EDIT_APP,GET_ALL_APP_CATE,SAVE_APP,OSS_UPLOAD} from 'lib/api';

import {redirect,backward} from 'lib/utils.js';
import './style.less';
import Crumb from "components/Crumb";
import OssUpload from "components/OssUpload";

class Add extends React.Component {

    constructor(props) {
        super(props);

    }

    state = {
        info:{},

        crumb:[
            {
                'href': '/',
                'title': '首页',
            },
            {
                'href': '/app',
                'title': '应用列表'
            },
            {
                'title': '添加/编辑'
            }
        ],
        fileList: [],
        img:''
    };


    componentDidMount() {
        const {id} = this.props.routeParams;

        if(id){
            API.fetch(EDIT_APP,{id:id},resp=>{

                this.props.form.setFieldsValue({
                    name: resp.name,
                    cateid:resp.cateid,
                    img:resp.img,
                    state:resp.state,
                });
                this.setState({
                    img:resp.img,
                    info:resp,
                })
            })
        }
        API.fetch(GET_ALL_APP_CATE,{},resp => {
            this.setState({
                cate:resp
            })
        })

        API.fetch(GET_CSRF_TOKEN,{},resp =>{
            this.setState({
                _token:resp
            })
        })


    }


    //表单提交
    submit(e) {
        e.preventDefault();

        const {info,_token} = this.state;

        this.props.form.validateFields((err, fieldsValue) => {


            if (err) {
                return;
            }

            if(info.id){
                fieldsValue.id = info.id;
            }

            fieldsValue._token = _token;

            API.post(SAVE_APP,fieldsValue,resp=>{
                redirect("/app")
            })

        });
    }

    cateChange(){

    }

    stateChange(){

    }



    handlerPic(field){
        this.props.form.setFieldsValue({
            img: field
        });
        console.log(field);

        this.setState({
            img:field
        })
    }




    render() {

        const {getFieldDecorator} = this.props.form;


        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
        };

        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 14,
                    offset: 4,
                },
            },
        };


        return (
            <Baselist>
                <Crumb crumb={this.state.crumb} />
                {/* table */}
                <Row gutter={24} style={{borderRadius: '8px', margin: 0, background: '#fff', minHeight: 500}}>
                    <Row className="head">
                        添加应用
                    </Row>

                    <Form onSubmit={this.submit.bind(this)}>
                        <FormItem
                            {...formItemLayout}
                            label="应用名称"
                            hasFeedback
                        >
                            {getFieldDecorator('name', {
                                rules: [
                                    {
                                        required: true, message: '应用名称必填',
                                    },
                                    {
                                        max:20,message:'最大长度为20'
                                    }
                                ],
                            })(
                                <Input  placeholder="请输入应用名称" />
                            )}
                        </FormItem>

                        <FormItem
                            {...formItemLayout}
                            label="分类"
                            hasFeedback
                        >
                            {getFieldDecorator('cateid', {
                                rules: [
                                    {
                                        required: true, message: '所属分类必填',
                                    }
                                ],
                            })(
                                <Select style={{ width: 120 }} onChange={this.cateChange.bind(this)}>
                                    {this.state.cate?
                                        this.state.cate.map((v,k) => {
                                            return (
                                                <Option key={k} value={v.id}>{v.name}</Option>
                                            )
                                        }):null}

                                </Select>
                            )}
                        </FormItem>


                        <FormItem
                            {...formItemLayout}
                            label="状态"
                            hasFeedback
                        >
                            {getFieldDecorator('state', {
                                rules: [
                                    {
                                        required: true, message: '应用状态必填',
                                    }
                                ],
                                initialValue:0
                            })(
                                <Select style={{ width: 120 }} onChange={this.stateChange.bind(this)}>
                                    <Option value={1}>上架</Option>
                                    <Option value={0}>下架</Option>
                                </Select>
                            )}
                        </FormItem>


                        <OssUpload default={this.state.img}  onFieldSet={this.handlerPic.bind(this)} multiple={false} />
                        <FormItem
                            {...formItemLayout}
                        >
                            {getFieldDecorator('img', {
                                rules: [
                                    {
                                        required: true, message: '封面图必填',
                                    }
                                ],
                            })(
                                <div>
                                    <Col span={6} >
                                        <label ></label>
                                    </Col>
                                    <Input type="hidden" />
                                </div>
                            )}
                        </FormItem>

                        <FormItem {...tailFormItemLayout}>
                            <Button type="primary" htmlType="submit">保存</Button>
                        </FormItem>
                    </Form>
                </Row>
            </Baselist>
        )
    }

}

export default Form.create()(Add);



